<script setup lang="ts">
// 折线图组件
import BasicEcharts from './BasicEcharts.vue'
import { ref, watch } from 'vue'
import { useGlobalStore } from '@/store'

interface propsType {
	title?: string
	id: string
}

const props = defineProps<propsType>()
const globalStore = useGlobalStore()
const options = ref({})
// 存放图表数据
const analysisData = ref<any>(undefined)

// 处理options
const handleOptions = () => {
	console.log('----', `${props.id}加载数据啦`)
	const filterParams = globalStore.filterParams
	const { params1 } = filterParams ?? {}
	let data = [150, 230, 224, 218, 135, 147, 260]
	if (params1) {
		data = data.map((item) => item + 30)
	}

	analysisData.value = data

	options.value = {
		title: {
			text: props.title ?? '折线图示例'
		},
		xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				data,
				type: 'line'
			}
		]
	}
}

// 1、监听筛选条件变化，清除图表数据
watch(
	() => globalStore.filterParams,
	(val) => {
		analysisData.value = undefined
	},
	{
		deep: true,
		// 立即执行，第一次渲染时不触发
		immediate: true
	}
)

// 2、监听可视区的变化 和 图表数据变化，判断是否需要重新渲染图表
watch(
	() => [globalStore.checkIsInView(props.id), analysisData.value],
	([inView, dataVal]) => {
		if (inView && !dataVal) {
			// 	图表组件在可视区内，但没有数据时，重新渲染图表
			handleOptions()
		}
	},
	{
		deep: true,
		// 立即执行，第一次渲染时不触发
		immediate: true
	}
)
</script>

<template>
	<!--定义好 div 标签的 id，用于判断此元素是否在父元素的可视区内-->
	<div :id="props.id">
		<BasicEcharts :options="options" />
	</div>
</template>

<style scoped></style>
